<template>
  <view class="order-card">
    <view class="o-top">
      <view>订单编号：{{item?.order_num}}</view>
      <view>{{item?.create_time}}</view>
    </view>
    <view class="o-con">
      <view class="o-title">{{item?.title}}</view>
      <view class="o-text">
        <rich-text :nodes="infoMsg"></rich-text>
      </view>
      <view class="o-price">
        <view>总价：{{item?.price}}元</view>
        <view>{{item?.status == 10 ? '待付款': '已完成'}}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { textColorFn } from "@/utils";
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});

const infoMsg = computed(() => {
  const { smalltext } = props.item;
  return textColorFn(smalltext);
});
</script>

<style lang=scss scoped>
.order-card {
  margin: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  .o-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999;
    font-size: 24rpx;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #eee;
  }
  .o-con {
    padding: 30rpx;

    .o-title {
      font-size: 40rpx;
      color: #000;
      font-weight: bold;
    }
    .o-text {
      font-weight: 400;
      font-size: 32rpx;
      color: #666;
      padding: 15rpx 0;
    }
  }

  .o-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999;
    font-weight: 400;
    font-size: 28rpx;
  }

  .o-color {
    color: #ff5c55;
  }
}
</style>